<template>
	<view>
		<view class="con">
			<view class="" style="padding: 0 29rpx;">
				<u-search placeholder="请输入搜索内容" height='73rpx' placeholderColor='#A09E9E' :showAction='false'
					v-model="keyword" @search="search"></u-search>
			</view>

			<u-tabs :list="list1" itemStyle='height:80rpx' @click="click" lineColor='#FF7428'
				activeStyle='color:#181818;font-size:30rpx;font-weight:bold' lineHeight='12rpx' lineWidth='32rpx'
				inactiveStyle='color:#333333;font-size:30rpx' :scrollable='false'></u-tabs>
			<scroll-view scroll-y="true" class="scrollview" @scrolltolower="scrolltolower">
				<view class="scrollviewbox">
					<view class="proitem" v-for="(item,index) in prolist" :key="index" @click="clickto(clickto('/pages/order/detail',item.id))">
						<view class="item_top flex">
							<image class="pro_pic" :src="item.img" mode=""></image>
							<view class="top_right flex">
								<view class="pro_name">
									{{item.p_name}}
								</view>
								<view class="pro_kc">
									{{item.address}}
								</view>
								<view class="por_price flex">
									<view class="num">
										数量×{{item.num}}
									</view>
									<view class="">
										<text v-if="item.method==0||item.method==1||item.method==2">￥</text>
										<image v-if="item.method==4" style="width: 22rpx;height: 22rpx;"
											src="/static/img/proitem/jf.png" mode=""></image>
										<image v-if="item.method==3" style="width: 22rpx;height: 22rpx;"
											src="/static/img/proitem/tz.png" mode=""></image>
										<text style="font-size: 36rpx;">{{item.price}}</text>
									</view>

								</view>
							</view>
						</view>
						<view class="caoz flex">
							<view class="time">
								<view class="" v-if="status!=1">
									发货时间:{{item.sendtime}}
								</view>
							</view>
							<view class="flex">
								<view class="btn" v-if="status==1" @click.stop="cancelorders(item.id)">
									取消订单
								</view>
								<view class="btn btn1" v-if="status==1" @click.stop="show=true,form.id=item.id">
									发货
								</view>
								<view class="btn btn1" v-if="status==2" @click.stop="clickto('/pages/order/detail',item.id)">
									订单查询
								</view>
								<!-- <view class="btn btn1" v-if="status==3" @click="deleteProductMerchants(item.id)">
									删除订单
								</view> -->
							</view>
						</view>
					</view>
					<u-loadmore :status="loadmorestatus" @loadmore="scrolltolower"/>
				</view>
			</scroll-view>
		</view>
		<!-- 发货弹框 -->
		<u-popup :show="show" @close="show=false" :closeOnClickOverlay='false' round='30rpx' mode="center">
			<view class="pop_box">
				<!-- <text>出淤泥而不染，濯清涟而不妖</text> -->
				<view class="pop_title">
					<image class="titlebg" src="/pages/business/static/titlebg.png" mode=""></image>
					发货信息
				</view>
				<view class="box_con">
					<div class="popitem">
						快递公司：<input type="text" placeholder="请输入快递公司" v-model="form.company">
					</div>
					<div class="popitem">
						快递单号：<input type="text" placeholder="请输入快递单号" v-model='form.express'>
					</div>
				</view>
				<view class="popfooter flex">
					<view class="popbtn" @click="show=false">
						取消
					</view>
					<view class="popbtn popbtn1" @click="merchantSends">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderMerchant,
		deleteProductMerchant,
		merchantSend,
		cancelorder
	} from '@/api/product.js'
	export default {
		data() {
			return {
				show: false,
				keyword: '',
				list1: [{
					name: '待发货'
				}, {
					name: '已发货'
				}, {
					name: '已完成'
				}],
				prolist: [],
				status: 1,
				baseurl: '',
				page: 1,
				last_page: 1,
				loadmorestatus: 'loadmore',
				form:{
					id:'',
					company:'',
					express:''
				}
			};
		},
		methods: {
			click(n) {
				// console.log(n)
				this.page = 1
				this.status = n.index + 1
				this.prolist = []
				this.getOrderMerchants()
			},
			clickto(url, id) {
				uni.navigateTo({
					url: url + '?id=' + id
				})
			},
			search(){
				this.page = 1
				this.prolist = []
				this.getOrderMerchants()
			},
			async getOrderMerchants() {
				let res = await getOrderMerchant({
					status: this.status,
					page: this.page,
					keyword:this.keyword
				})
				// console.log(res.data.data.data)
				this.last_page = res.data.data.last_page
				this.prolist = [...this.prolist, ...res.data.data.data]
				this.loadmorestatus = 'loadmore'
				
				this.prolist.map(t => {
					t.img = this.$BASE_URL + t.p_image.split(',')[0]
				})
			},
			deleteProductMerchants(id) {
				deleteProductMerchant({
					id
				}).then(res => {
					// console.log(res.data)
					if (res.data.code == 1) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.prolist = []
							this.page = 1
							this.getOrderMerchants()
						}, 1000)
					}
				})
			},
			merchantSends(id) {
				if(!this.form.company){
					uni.showToast({
						title:'请输入快递公司',
						icon:'none'
					})
					return
				}
				if(!this.form.express){
					uni.showToast({
						title:'请输入快递单号',
						icon:'none'
					})
					return
				}
				// console.log(id)
				merchantSend(this.form).then(res => {
					// console.log(res)
					if (res.data.code == 1) {
						this.show=false
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							this.prolist = []
							this.page = 1
							this.getOrderMerchants()
						}, 1000)
					}
				})
			},
			cancelorders(id) {
				cancelorder({
					id
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.prolist = []
							this.page = 1
							this.getOrderMerchants()
						}, 1000)
					}
				})
			},
			scrolltolower() {
				this.loadmorestatus = 'loading'
				this.page++
				if (this.page <= this.last_page) {
					this.getOrderMerchants()
				} else {
					this.loadmorestatus = 'nomore'
				}
			}
		},
		mounted() {
			
			// this.getOrderMerchants()
		},
		onShow() {
			
				this.page=1
				this.prolist=[]
				this.getOrderMerchants()
		}
	}
</script>

<style lang="less">
	.con {
		padding: 29rpx 0;
		border-top: 2rpx solid #F4F6F8;

		.scrollview {
			height: calc(100vh - 80rpx - 73rpx - 44px - 58rpx - 6rpx);
			/* #ifdef MP */
			height: calc(100vh - 80rpx - 73rpx - 58rpx - 6rpx);
			/* #endif */
		}

		.scrollviewbox {
			padding: 0 32rpx 26rpx 27rpx;

			.proitem {
				margin-top: 26rpx;
				background: #FFFFFF;
				box-shadow: 0px 1rpx 24rpx 0px rgba(24, 24, 24, 0.08);
				border-radius: 25rpx;
				padding: 32rpx 48rpx 32rpx 30rpx;

				.item_top {
					.pro_pic {
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
						margin-right: 26rpx;
					}

					.top_right {
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						height: 140rpx;
						flex: 1;

						.pro_name {
							color: #333333;
							font-size: 32rpx;
							font-weight: bold;
						}

						.pro_kc {
							color: #6A6A6A;
							font-size: 24rpx;
						}

						.por_price {
							// align-self: flex-end;
							justify-content: space-between;
							font-size: 24rpx;
							font-weight: bold;
							color: #FD2A00;
							width: 100%;

							.num {
								color: #6A6A6A;
								font-weight: normal;
								font-size: 24rpx;
							}
						}
					}
				}

				.caoz {
					justify-content: space-between;
					width: 100%;
					margin-top: 52rpx;

					.time {
						color: #6A6A6A;
						font-size: 24rpx;
						min-width: 1rpx;
					}

					.btn {
						padding: 0 42rpx;
						line-height: 68rpx;
						border: 1rpx solid #CCCCCC;
						border-radius: 34rpx;
						text-align: center;
						color: #0B0B0B;
						font-size: 30rpx;
						margin-left: 22rpx;
					}

					.btn1 {
						border: 0;
						background: linear-gradient(153deg, #FF8717, #FF5F00);
						color: #fff;
					}
				}
			}
		}

	}

	.release {
		width: 147rpx;
		height: 140rpx;
		position: fixed;
		bottom: 85rpx;
		right: 23rpx;
	}

	.popbox {
		width: 614rpx;
		height: 496rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

	}

	.pop_box {
		width: 534rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 48rpx 40rpx 54rpx;
		position: relative;

		.pop_title {
			margin-bottom:50rpx;
			text-align: center;
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
			position: relative;
			line-height: 34rpx;

			.titlebg {
				position: absolute;
				top: 0;
				left: 157rpx;
				width: 218rpx;
				height: 34rpx;
			}
		}

		.popitem {
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			height: 87rpx;
			padding: 0 33rpx;
			background-color: #F7F7F9;
			border-radius: 10rpx;
			margin-bottom: 17rpx;
		}

		.popfooter {
			margin-top: 48rpx;
			padding: 0 39rpx;
		}

		.popbtn {
			width: 199rpx;
			line-height: 67rpx;
			background: #F7F7F9;
			border-radius: 34rpx;
			text-align: center;
			font-size: 30rpx;
			color: #333;
		}

		.popbtn1 {

			background: linear-gradient(153deg, #FF8717, #FF5F00);
			color: #fff;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
